<template>
  <div id="container" class="container"></div>
</template>
<script lang="ts" setup name="WtServiceInformationCommonproblem">
  import { ref, onMounted } from 'vue';
  /**
   * 初始化地图
   */

  let map = ref();
  const init = () => {
    /*  let center = new TMap.LatLng(22.4, 114); //设置中心点坐标
    //初始化地图
    let map = new TMap.Map(container, {
      center: center,
    });
    let marker = new TMap.MultiMarker({
      map: map,
      styles: {
        marker: new TMap.MarkerStyle({
          width: 25,
          height: 35,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
        }),
      },
      geometries: [
        {
          // 标记位置(纬度，经度，高度)
          position: new TMap.LatLng(22.4, 114),
          id: 'one',
          styleId: 'marker',
          content: '腾讯深圳总部', //标注文本
        },
        {
          position: new TMap.LatLng(22.4, 114.234324234),
          styleId: 'marker',
          id: 'two',
        },
        {
          position: new TMap.LatLng(22.4011, 114.01231),
          styleId: 'marker',
          id: 'three',
        },
        {
          position: new TMap.LatLng(22.403311, 114.000123),
          styleId: 'marker',
          id: 'four',
        },
      ],
    }); */

    map.value = new qq.maps.Map(document.getElementById('container'), {
      // 地图的中心地理坐标。
      center: new qq.maps.LatLng(22.4, 114),
      zoom: 12,
    });
    let marker = new qq.maps.Marker(
      {
        position: new qq.maps.LatLng(22.4, 114),
        animation: qq.maps.MarkerAnimation.DROP,
        map: map.value,
      },
   
    );
  };

  onMounted(() => {
    init();
  });
</script>

<style lang="less" scoped>
  .container {
    width: 100%;
    height: 800px;
    border: 10px solid #ececec;
    position: relative;
  }
  .map {
    position: absolute;
    top: 70px;
    margin: 10px 50px;
    z-index: 9999;
  }
</style>
